<template>
  <div class="container-base">
    <el-card>
      <p>说明: 目前支持学科和关键字条件筛选</p>
      <el-row type="flex" justify="end" align="center" style="margin-bottom:20px">
        <el-button type="success" @click="$router.push({ name: 'questions-new' })">
          <i class="el-icon-edit" style="color: white"></i>
          新增试题
        </el-button>
      </el-row>
      <question-add @search="search" ></question-add>
      <el-alert :title="`数据一共${counts}条`" type="info" :closable="false" show-icon class="about"> </el-alert>
      <questions-t :isList="true" :tableData="tableData"></questions-t>
      <el-row type="flex" justify="end" align="center" style="padding-top: 15px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          background
          :page-size="5"
          :page-sizes="[5, 10, 20, 50]"
          layout="  prev, pager, next, sizes,jumper"
          :total="counts"
        >
        </el-pagination>
      </el-row>
    </el-card>
  </div>
</template>

<script>
// import QuestionPre from '../components/questions-preview.vue'
import { list } from '@/api/hmmm/questions'
import QuestionsT from '../components/questions-t'
import QuestionAdd from '../components/questions-add.vue'
export default {
  components: { QuestionAdd, QuestionsT },
  data () {
    return {
      tableData: [],
      counts: 0,
      currentPage: 1,
      page: 1,
      pagesize: 5,
      keyword: '',
      subjectID: 0
    }
  },
  created () {
    this.list(this.page, this.pagesize)
  },
  methods: {
    // 获取表格数据
    async list (page, pagesize, keyword, subjectID) {
      if (keyword || subjectID) {
        const { data } = await list({ page, pagesize, keyword, subjectID })
        this.counts = data.counts // 总数
        this.tableData = data.items // 表单数据
      } else {
        const { data } = await list({ page, pagesize })
        this.counts = data.counts // 总数
        this.tableData = data.items // 表单数据
      }
    },
    // 切换当前页显示数量
    handleSizeChange (pagesize) {
      this.pagesize = pagesize
      this.list(this.page, this.pagesize, this.keyword)
    },
    // 切换页码
    handleCurrentChange (page) {
      this.page = page
      this.list(this.page, this.pagesize, this.keyword)
    },
    // 搜索
    search (subject, keyval) {
      if (subject) {
        return this.list(this.page, this.pagesize, '', subject)
      }
      this.list(this.page, this.pagesize, keyval)
    }
  }
}
</script>

<style scoped lang='scss'>
.container-base {
  padding: 15px 10px;
  p {
    font-size: 14px;
    color: #ffcee2;
  }
  .about {
    margin-bottom: 15px;
  }
}
</style>
